<!--
 * @Author: yangfan 1437446666@qq.com
 * @Date: 2023-02-25 13:51:18
 * @LastEditors: yangfan 1437446666@qq.com
 * @LastEditTime: 2023-02-26 20:42:13
 * @FilePath: \creation-platform-113\src\components\knowledgeBooklet\index.vue
 * @Description: 知识小测
-->
<template>
  <div class="knowledge-con">
    <a-card hoverable>
      <template #cover>
        <img
          alt="example"
          :src="item.cover"
          :style="{ width: '100%', height: '150px' }"
        />
      </template>
      <template #actions>
        <edit-outlined key="edit" />
        <setting-outlined key="setting" @click="HeadClick" />
        <a-tooltip placement="top">
          <template #title> 发布上线</template>
          <cloud-upload-outlined key="upload" />
        </a-tooltip>
        <ellipsis-outlined key="ellipsis" />
      </template>
      <a-card-meta :title="item.title" :description="item.summary">
      </a-card-meta>
    </a-card>
  </div>
</template>

<script lang="ts">
import {
  SettingOutlined,
  EditOutlined,
  EllipsisOutlined,
  CloudUploadOutlined
} from '@ant-design/icons-vue'
import type { PropType } from 'vue'
interface knowledgeListtType {
  [key: string]: string
}
import { defineComponent, reactive } from 'vue'
export default defineComponent({
  props: {
    item: {
      type: Object as PropType<knowledgeListtType>,
    }
  },
  name: 'KnowBook',
  components: {
    SettingOutlined,
    EditOutlined,
    EllipsisOutlined,
    CloudUploadOutlined
  },
  setup() {
    //删除小册
    const del_knowledge = async () => {
      console.log('删除小册')
    }
    //设置小册
    const set_knowledge = async () => {
      console.log('设置小册')
    }
    //回显小册
    const echo_knowledge = async () => {
      console.log('回显小册')
    }
    const HeadClick = () => {
      console.log('点击测试')
    }
    /**@default 接口的调用 */
    // del_knowledge()
    // echo_knowledge()
    // set_knowledge()
    return { del_knowledge, set_knowledge, HeadClick }
  }
})
</script>

<style lang="scss">
.knowledge-con {
  width: 350px;
  height: 300px;
  padding: 20px;
}
</style>
